@import 'mixins';
@import 'vars';

$field-header: #e7ebef;
$field-line: #c7cfd7;
$padding: 1rem;

.table-items-row-details {
    cursor: default;

    &::before {
        right: 4.8rem;
    }
}

.table-items-row-summary {
    padding-left: .75rem;
}

.plain {
    background: none;
    border: 0;
    border-radius: 0;

    .table-items-row-details {
        background: $color-white;
        border: 1px solid $color-border;
        border-radius: $border-radius;
    }

    .btn-expand.expanded::before {
        border-bottom-color: $color-border !important;
    }
}

.col {
    &-options {
        max-width: 140px;
    }
}

.nested-fields {
    background: $color-border-lighter;
    border: 0;
    border-radius: 0 0 $border-radius $border-radius;
    padding: $padding;
    padding-left: 2 * $padding;
    position: relative;
}

:host ::ng-deep {
    .nested-field {
        position: relative;

        &-add {
            padding-top: 1rem;
            padding-bottom: 1rem;
            position: relative;
        }

        &-line-v {
            @include absolute($padding, auto, 3 * $padding + .25rem, $padding);
            border: 0;
            border-left: 2px dashed $field-line;
            width: 2px;
        }

        &-line-h {
            @include absolute(-2px, auto, 50%, -$padding);
            border: 0;
            border-bottom: 2px dashed $field-line;
            width: $padding - .25rem;
        }
    }
}

.field {
    position: relative;

    &-icon {
        color: $color-border-darker;
        font-size: 1.2rem;
        font-weight: normal;
        margin-right: 1rem;
        vertical-align: middle;
    }

    &-name {
        @include truncate;
    }

    &-hidden {
        color: lighten($color-text-decent, 40%);
    }

    &-partitioning {
        color: $color-text-decent;
        font-size: $font-smallest;
        font-weight: normal;
    }

    .tag {
        max-width: 6rem;
        min-width: 4rem;
        opacity: .9;
    }
}